ITHIC
2020 - Grupo CODA Tv Azteca ITHIC Ux/Ui
Sistema de ventas, cobros y facturación de spots publicitarios de Tv Azteca transmitidos al aire.
ITHIC es un sistema de gestión de spots publicitarios que permite programar la presentación de estos spots en televisión, así como generar la facturación, gestionar la cobranza y realizar los pagos correspondientes por los spots transmitidos en los canales de TV Azteca. Los usuarios pueden utilizar este sistema para programar la presentación de un spot publicitario durante un programa televisivo específico, estableciendo el horario, la fecha y el lugar de transmisión. Se necesitaron varias reuniones de entendimiento con los stakeholders, gerentes y subgerentes para comprender a fondo la parte del negocio.
El cliente solicitó el rediseño del aplicativo ITHIC debido a que el sistema anterior estaba desarrollado en Visual Basic. Por lo tanto, era necesario crear una versión web para los usuarios de este sistema. El trabajo realizado en este proyecto consistió en investigar sobre el negocio con usuarios y stakeholders involucrados con el sistema, analizar el estado del sistema, generar la arquitectura de información, crear propuestas de diseño (wireframes, mockups, prototipos), validarlas con los usuarios, probarlas y finalmente implementar las propuestas. Para su desarrollo, se optó por el framework Angular.
Menú principal
Con la información obtenida de los usuarios y la revisión del estado actual del sistema, se comenzó trabajando en el menú principal del aplicativo. Fue necesario estructurar la información presentada en el menú para garantizar su accesibilidad y usabilidad. ITHIC es un sistema muy robusto, por lo que cuenta con numerosas opciones. Como se muestra en las imágenes, el menú puede llegar a tener hasta 3 niveles de profundidad. Este menú se prototipó antes de proceder con su desarrollo, ya que los usuarios solicitaron que tuviera la capacidad de colapsar y expandirse. Se procuró que fueran fácilmente identificables los diferentes niveles de profundidad y las opciones disponibles. Las condiciones técnicas para el diseño establecen que el menú dentro del sistema reside en un marco (frame), mientras que las pantallas invocadas se cargan en la parte vacía del marco y se ajustan al tamaño de la pantalla desde la cual se visualicen. La solución diseñada muestra los niveles de profundidad diferenciados por un tonos más claros al color del primer nivel, los tonos azules van asociados a la parte de negocio y se identifican las secciones con iconografía personalizada para ITHIC, se colocó el menú en la parte izquierda para permitir el colapso y despliegue. En la parte superior izquierda se han ubicado listas desplegables. Una de estas listas corresponde a las estaciones de televisión disponibles, mientras que la otra lista muestra la sesión del usuario actual.
CAMBIOS MASIVOS
El módulo "Cambios masivos" nos remite a que la funcionalidad principal de esta pantalla es que permita al usuario hacer modificaciones de forma masiva a la información que se encuentra registrada. Inicialmente el usuario hace una búsqueda, con los resultados de la búsqueda, el usuario selecciona los registros que va actualizar, copiar y remplazar. En las imágenes se muestran las propuestas de diseño generadas y validadas por el equipo de negocio y usuario de ITHIC. Se prototipo con Adobe XD y se maqueto la solución en Angular versión 12. En el video se muestra el prototipo generado y algunas de las funcionalidades que posteriormente fueron construidas.
RESERVACIÓN EN LÍNEA
La funcionalidad de la pantalla "Reservación en línea" permite a los usuarios buscar, modificar y generar órdenes para reservar espacios publicitarios en cualquiera de los canales o estaciones televisivas de TV Azteca. Los clientes deben registrarse previamente y se les asigna un número de identificación dentro del sistema.
La búsqueda muestra al usuario los spots registrados en una tabla, con detalles de cada orden. En el detalle se incluyen los datos precargados del cliente, un breve historial de montos y saldos, así como el tipo de cambio, el costo total, el total de spots transmitidos y otros detalles relevantes.
El diseño de la funcionalidad "Reservación en línea" presentó varios desafíos. Primero, debía considerar que técnicamente la pantalla se incrustaría dentro de un "Frame" que contiene el menú principal y debe cargarse dentro de este. Además, se enfrentó a la tarea de integrar una gran cantidad de controles y componentes en la pantalla, así como de definir el flujo de acciones, como buscar, modificar, generar, guardar y mostrar detalles de las órdenes, que deben iterarse según los diferentes estados.
Se procuró mantener la consistencia en el sistema mediante un sistema de diseño establecido. Se recabaron los puntos de vista del usuario sobre la usabilidad de las pantallas, el flujo, la disposición de los controles y la apariencia, en colaboración con el equipo de negocio. En cuanto al aspecto estético, se buscó un diseño minimalista que no resultara abrumador visualmente para los usuarios y stakeholders. Se adjunta un video que muestra un ejemplo del prototipo, el flujo y algunas funcionalidades de la pantalla.
CARTA PLANEADA
La funcionalidad de la pantalla "Carta planeada" permite al usuario programar la presentación de un spot publicitario dentro de un programa en el aire en cualquier canal o estación televisiva de TV Azteca. Para activar esta pantalla, el usuario debe haber generado previamente una orden de reservación en línea.
Al acceder al sistema, se presenta la "carta planeada", que es técnicamente un calendario en el cual se visualiza el programa, el horario, el canal, el producto y las propiedades registradas que se pueden o no mostrar dentro de la carta. También se muestra el detalle de la publicación semanal de la carta, el código del programa y un reporte asociado.
Para generar una propuesta de esta pantalla, fue necesario diseñar teniendo en cuenta el frame del menú principal, ya que la pantalla debía cargarse dentro de este frame. Además, se trabajó en colaboración con usuarios del sistema para recabar sus opiniones sobre la funcionalidad y usabilidad de la pantalla. Este paso fue crucial, ya que las iteraciones se realizaron sobre el prototipo para obtener la mejor solución.
Dado que la pantalla para su programación presentaba una alta complejidad, el cliente solicitó que se optimizara al máximo desde la etapa de prototipado antes de proceder al desarrollo de la "Carta planeada".
